<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-11-03 15:20:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-07-08 16:34:58
-->
<template>
  <el-scrollbar>
    <div class="hl-aside-box">
      <div class="logo-flex-box" :class="store.isCollapse ? 'col-img-box' : ''">
        <img @click="toHome" class="avatar" :src="logo" />
      </div>
      <div class="title" v-show="!store.isCollapse">数字化管理后台</div>
      <!-- 名字 -->
      <!-- <div class="aside-name-box" v-show="!store.isCollapse">宏联消费系统</div> -->
      <Menu></Menu>
    </div>
  </el-scrollbar>
</template>
<script setup lang="ts">
import Menu from './Menu.vue'
import { PiniaStore } from '../../store'
import { useRoute, useRouter } from 'vue-router'
import logo from '../../assets/images/logo.png'
const store = PiniaStore()
const router = useRouter()
const toHome = async () => {
  router.replace('/home')
}
</script>
<style lang="scss">
.hl-aside-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 50px;

  .logo-flex-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      // border: 2px solid var(--el-color-primary);
      background-color: var(--el-color-white);
    }

  }

  .title {
    font-size: 18px;
    color: #ffffff;
    font-weight: bold;
    margin: 20px 0 40px 0;
  }

  .col-img-box {
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
    img {
      width: 44px;
      height: 44px;
    }

  }

  .aside-name-box {
    margin-top: 15px;
    color: var(--el-color-white);
    margin-bottom: 30px;
  }
}
.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title{
  background: #2C68FF;
  border-radius: 5px
}
.el-menu--collapse .el-sub-menu .el-sub-menu__title:hover{
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px
}
</style>
